<template>
  <CarDetails v-if="show" />
  <div class="car">
    <div class="left" @click="show = true">
      <img src="https://hzyczn.52br.net/images/h5/icon/car.png" alt="" />
      <span
        >￥<b>{{ carStore.totalMoney }}</b></span
      >
    </div>
    <div class="right">
      <button
        @click="goPay"
        v-if="carStore.carList.length !== 0"
      >
        去结算
      </button>
    </div>                                     
  </div>
  <!-- <van-button type="primary" text="显示遮罩层" /> -->
  <van-overlay :show="show" @click="show = false" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCarStore } from '@/stores/index'
import { useRouter } from 'vue-router'
import CarDetails from '@/components/CarDetails/index.vue'
const carStore = useCarStore()
const show = ref(false)
// 去结算页面
const router = useRouter()
function goPay() {
  router.push({ name: 'pay' })
}
</script>

<style lang="less" scoped>
.car {
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  height: 13.0667vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10vw;
  padding-right: 7vw;
  .left {
    width: 8vw;
    height: 8vw;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
    span {
      margin-left: 3vw;
      b {
        font-size: 5vw;
        color: #d81e06;
        font-weight: bold;
      }
    }
  }
  .right {
    button {
      border: none;
      width: 25vw;
      height: 10vw;
      border-radius: 5vw;
      color: #fff;
      background: #b14094;
    }
  }
}
</style>
